import React, { Component } from 'react'
import { Table, Input, Button } from 'antd';
import './index.scss'
export default class statistics extends Component {

  state = {
    dataList: [],
    pagination: {
      total: 0,
      current: 1,
      pageSize: 10,
      pageSizeOptions: ["10", "20", "30", "40", "50"],
      showSizeChanger: true,
      showTotal: total => `共 ${total} 条`
    },
    searchValue: {
      sku: '',
      account_id: ''
    }
  }

  columns = [
    {
      title: '时间',
      dataIndex: 'snapshot_date',
    }
  ]
  componentDidMount() {
    this.getList()
  }
  getList=()=> {
    this.$axios.post(this.$urls.storageFee, {
      sku: this.state.searchValue.sku,
      account_id: this.state.searchValue.account_id,
      page: this.state.pagination.current,
      limit: this.state.pagination.pageSize
    }).then(res => {
      if (res.code === 20000) {
        this.setState({
          dataList: res.data.items,
          pagination: { ...this.state.pagination, total: res.data.total }
          // ['pagination.total']:res.data.total,
        })
        // console.log(this.state, '============');
      }
    }).catch(err => {
      console.log(err)
    })
  }
  render() {
    let setVal = (e) => {
      this.setState({
        searchValue: { ...this.state.searchValue, [e.target.name]: e.target.value }
      })
    }
    let resetSearch = ()=>{
      this.setState({
        searchValue: {
          sku: '',
          account_id: ''
        }
      })
    }
    let changeList = (e)=> {
      this.setState({
        pagination: { ...this.state.pagination, current: e.current, pageSize: e.pageSize }
        // ['pagination.total']:res.data.total,
      },this.getList)
      
      console.log(e,'============');
    }
    return (
      <div className="table_page">
        <div className="search_form">
          <div className="form_item">
            <div className="form_label">SKU</div>
            <div className="form_value">
              <Input placeholder="请输入SKU" name="sku" value={this.state.searchValue.sku} onChange={setVal} />
            </div>
          </div>

          <div className="form_item">
            <div className="form_label">账号</div>
            <div className="form_value">
              <Input placeholder="请输入账号" autoComplete='off' name="account_id" value={this.state.searchValue.account_id} onChange={setVal} />
            </div>
          </div>
          <div className="form_btn">
            <Button type="primary" onClick={this.getList}>搜索</Button>
            <Button onClick={resetSearch}>重置</Button>
          </div>
        </div>
        <Table rowKey="id" pagination={this.state.pagination} columns={this.columns} dataSource={this.state.dataList} onChange={changeList} />
      </div>
    )
  }
}